<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/icons.html">
<dom-module id="downloads-signup">
        <template>
            <style>
            .content{ position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: rgba(230, 227, 227, 0.8);}
            .content .zhuce{width: 600px;margin: 0 auto;height: 560px;box-sizing: border-box;border-radius: 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);background: #ffffff;}
            .content .zhuce .box{width: 100%;padding: 0 130px;box-sizing: border-box;}
            .content .zhuce h1{text-align: center;line-height: 80px;color: #2c2c2c;}

            .zhuce .box .inputBox{padding-left: 38px;margin-top: 18px;width: 100%;border-radius: 4px;border: 1px solid #e7e7e7;height: 44px;box-sizing: border-box;line-height: 44px;}
            .zhuce .box .phoneBox{padding-left: 88px;}
            .zhuce .box .inputBox.phoneBox img{margin: 13px 11px 0 -77px;}
            .zhuce .box .verifyBox{padding-right: 100px;}
            .zhuce .box .verifyBox input.btnVerify{width: 100px;margin-right: -100px;cursor: pointer;background: #f5f5f5;color: #bfbfbf;}
            .zhuce .box .verifyBox input.btnVerify:hover{color: #888888;background: #eeeeee;}
            .zhuce .box .inputBox img{margin: 13px 11px 0 -27px;float: left;}
            .zhuce .box .inputBox select.selPhone{width: 50px;border: 0;outline: none;color: #888888;border-right: 1px solid #e7e7e7;float:left;margin-left: -50px;margin-top: 13px;}
            .zhuce .box .inputBox input{color: #666666;font-size: 14px;height: 42px;width: 100%;padding-left: 5px;box-sizing: border-box;float: left;}
            input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #cccccc;}
            .zhuce .box p input[type=checkBox]{vertical-align: text-top;width: 14px;height: 14px;margin-right: 5px;}
            .zhuce .box p span{font-size: 14px;line-height: 34px;}
            .zhuce .box p a{font-size: 14px;line-height: 34px;color: #1559d4;cursor: pointer;}
            .zhuce .box .btnZhuce{width: 100%;background: #1559d4;height: 42px;color: #ffffff;border-radius: 4px;margin-top: 25px;cursor: pointer;}
            .zhuce .box .btnZhuce:hover{background: #407cec;}
            .zhuce .box .btnZhuce:active{background: #124ebc;}
            </style>
            <iron-ajax
            id="ajax" method="POST" url="" handle-as="json" content-type="application/json" dataType="jsonp"  headers='X-CSRF-Token": "csrfToken' on-response="handleResponse"></iron-ajax>            
            <img  on-click="openDialog"  src="">
            <paper-dialog id="dialog" role="dialog" >
                <div class="content">
                    <div class="zhuce">
                        <div class="box">
                            <h1>注册洪流账号</h1>
                            <form action="" method="post">
                                <div class="inputBox"><img src="" alt=""><input type="text" placeholder="用户名" /></div>
                                <div class="inputBox phoneBox"><img src="" alt=""><select class="selPhone"><option value="+86">+86</option></select><input type="text" placeholder="手机号码" /></div>
                                <div class="inputBox verifyBox"><img src="" alt=""><input type="text" placeholder="请输入手机验证码" /><input class="btnVerify" type="button" value="获取验证码"></div>
                                <div class="inputBox"><img src="" alt=""><input type="password" placeholder="请输入密码"/></div>
                                <div class="inputBox"><img src="" alt=""><input type="password" placeholder="请确认密码"/></div>
                                <p><input type="checkBox"><span>我同意遵守</span><a herf="javascript:void(0);">《洪流XXX协议》</a></p>
                                <input type="button" class="btnZhuce" value="注  册">
                            </form>
                        </div>                                    
                    </div>
                </div>        
            </paper-dialog>
        </template>
    <script src="chrome://downloads/signup.js"></script>
</dom-module>